<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="ShortcutKeyList mind-corner left" :class="{ active, rightDrawer, viewExperiment }">
    <div class="corner-title">
      <div class="label">快捷键列表</div>
      <el-tooltip class="item" effect="dark" :content="'关闭'" placement="top">
        <el-button class="close-button" type="text" @click="shortcutKeyClose()">
          <svg-icon icon-class="guanbi" />
        </el-button>
      </el-tooltip>
    </div>
    <div class="mind-corner-content">
      <div v-for="(row, index) in shortcutKeyListFilter" :key="index">
        <label>
          <div v-for="(key, keyIndex) in row.keys" :key="'key' + keyIndex" class="keys-container">
            <span keys="" class="key">{{ key }}</span>
            <span v-if="keyIndex !== row.keys.length - 1" class="interval">+</span>
          </div>
        </label>
        <span class="label">{{ row.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { mapGetters, mapMutations } from 'vuex'
import { ref, computed, reactive, onMounted } from "vue"
import { designerStore } from 'src/stores/designerTool/designerTool'
const store = designerStore()
const rightDrawer = computed(() => {
  return !!store.rightDrawer
})
const viewVersion = computed(() => {
  return !!store.versionId
})
const viewExperiment = computed(() => {
  return !!store.experimentId || !!store.flowReadonlyId
})
const readonly = computed(() => {
  return viewVersion.value || viewExperiment.value
})
const shortcutKeyListFilter = computed(() => {
  return shortcutKeyList.value.filter(item => !item.isShow)
})
const shortcutKeyList = computed(() => {
  return [
    {
      'keys': [
        'Ctrl',
        'U'
      ],
      'label': '打开关闭快捷键弹窗'
    },
    {
      'keys': [
        'Ctrl',
        'S'
      ],
      'label': '保存当前画布',
      isShow: readonly.value
    },
    {
      'keys': [
        'Ctrl',
        '滚轮'
      ],
      'label': '画布扩大'
    },
    {
      'keys': [
        'Ctrl',
        '滚轮'
      ],
      'label': '画布缩小'
    },
    {
      'keys': [
        'Ctrl',
        'K'
      ],
      'label': '适应画布'
    },
    {
      'keys': [
        'Ctrl',
        'O'
      ],
      'label': '实际尺寸'
    },
    {
      'keys': [
        'Ctrl',
        'F'
      ],
      'label': '自动布局'
    },
    {
      'keys': [
        'Ctrl',
        'P'
      ],
      'label': '打开关闭小地图'
    },
    {
      'keys': [
        'Ctrl',
        ']'
      ],
      'label': '算子置于顶层',
      isShow: readonly.value
    },
    {
      'keys': [
        'Ctrl',
        '['
      ],
      'label': '算子置于底层',
      isShow: readonly.value
    },
    // {
    //   'keys': [
    //     'Ctrl',
    //     'E'
    //   ],
    //   'label': '刷新当前画布页面'
    // },
    {
      'keys': [
        'Ctrl',
        'I'
      ],
      'label': '打开画布信息'
    },
    {
      'keys': [
        'Ctrl',
        'R'
      ],
      'label': '运行画布',
      isShow: viewExperiment.value
    },
    // {
    //   'keys': [
    //     'Ctrl',
    //     '上下左右'
    //   ],
    //   'label': '画布当前选中的算子左右移动'
    // },
    {
      'keys': [
        'Ctrl',
        'Alt',
        'Q'
      ],
      'label': '收纳算子框',
      isShow: viewExperiment.value
    },
    {
      'keys': [
        'Ctrl',
        'Alt',
        'F'
      ],
      'label': '折叠算子列',
      isShow: readonly.value
    },
    {
      'keys': [
        'Ctrl',
        'Alt',
        'R'
      ],
      'label': '刷新算子列表',
      isShow: readonly.value
    },
    {
      'keys': [
        'Esc'
      ],
      'label': '收纳参数框'
    },
    {
      'keys': [
        'Ctrl',
        'J'
      ],
      'label': '打开工作流信息'
    },
    {
      'keys': [
        'Ctrl',
        'L'
      ],
      'label': '打开运行日志'
    },
    {
      'keys': [
        'Ctrl',
        'G'
      ],
      'label': '打开运行结果'
    },
    // {
    //   'keys': [
    //     'Ctrl',
    //     'M'
    //   ],
    //   'label': '打开模型'
    // },
    // {
    //   'keys': [
    //     'Ctrl',
    //     'H'
    //   ],
    //   'label': '打开文件'
    // },
    // {
    //   'keys': [
    //     'Ctrl',
    //     'D'
    //   ],
    //   'label': '打开数据'
    // },
    {
      'keys': [
        'Shift',
        'S'
      ],
      'label': '导出工作流文件',
      isShow: viewExperiment.value
    }
  ]
})
const active = computed(() => {
  return store.shortcutKeyActive
})
function shortcutKeyClose() {
  store.SET_SHORTCUT_KEY_ACTIVE(false)
}

</script>

<style lang="scss" scoped>
@import "src/css/designerStyles/index.scss";
.ShortcutKeyList {
  &.mind-corner {
    position: absolute;
    width: 300px;
    display: none;
    background: #fff;
    opacity: 0;
    top: 68px;
    z-index: 100;
    right: 0;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    height: calc(100vh - 96px);
    border: 1px solid #dcdee2;
    margin: 14px;
    padding: 0;

    &.viewExperiment {
      height: calc(100vh - 28px);
      top: 0;
    }

    &.left {
      right: -300px;

      &.active {
        opacity: 1;
        right: 0;
        display: block;
      }

      &.rightDrawer {
        right: 310px;
      }
    }

    .corner-title {
      display: flex;
      justify-content: space-between;
      padding: 10px 16px;
      align-items: center;

      .label {
        font-size: 20px;
        font-weight: 500;
      }

      .close-button {
        color: #606266;
        padding: 0;
      }
    }

    .mind-corner-content {
      padding: 0 6px;
      overflow: auto;
      height: calc(100% - 56px);

      &>div {
        padding: 4px 7px;
        margin-top: 0;
        display: flex;
        justify-content: space-between;

        &:hover {
          background: rgb(244, 244, 245);
        }

        label {
          display: inline-block;
          font-size: 12px;
        }

        .keys-container {
          display: inline-block;

          .key {
            border: 1px solid #ccc;
            border-radius: 3px;
            display: inline-block;
            padding: 4px 4px 2px 4px;
            margin: 0 3px;
            color: #555;
            width: auto;
            cursor: pointer;

            &:hover {
              background: rgb(233, 233, 235);
            }
          }

          .interval {
            margin: 0 4px;
          }
        }

        .label {
          color: #666;
        }
      }
    }
  }
}
</style>
